<template>
  <Suggestion
    :items="suggestions"
    @select="handleSelect"
  >
    <template #default="{ onTrigger, onKeyDown }">
      <Sender
        v-model="value"
        @change="handleChange($event, onTrigger)"
        @keydown="onKeyDown"
        placeholder="输入 / 获取建议"
      />
    </template>
  </Suggestion>
</template>

<script setup name="BubbleSuggestion">
import { ref } from 'vue'
import { RedditOutlined } from '@ant-design/icons-vue'
import { Sender, Suggestion } from 'ant-design-x-vue'

const value = ref('')

const suggestions = [
  { label: 'Write a report', value: 'report' },
  { label: 'Draw a picture', value: 'draw' },
  {
    label: 'Check some knowledge',
    value: 'knowledge',
    icon: h(RedditOutlined),
    children: [
      {
        label: 'About React',
        value: 'react',
      },
      {
        label: 'About Ant Design',
        value: 'antd',
      },
    ],
  },
]

const handleSelect = (itemVal) => {
  value.value = `[${itemVal}]:`
}

const handleChange = (nextVal, onTrigger) => {
  if (nextVal === '/') {
    onTrigger()
  } else if (!nextVal) {
    onTrigger(false)
  }
  value.value = nextVal
}
</script>